<%@ page import="com.fantasy.utils.CookieUtils" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>创作者中心</title>


    <link rel="stylesheet" href="../bootstrap/css/style.css">
    <link rel="stylesheet" href="../bootstrap/css/font-awesome(1).css">
    <link rel="stylesheet" href="../bootstrap/css/nprogress.css">
    <link rel="stylesheet" href="../css/program.css">
    <link rel="stylesheet" href="../css/index.css">

    <script src="../bootstrap/js/jquery/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>


<body>
    <div class="wrapper">
        <!-- 左侧边栏       -->
        <jsp:include page="./leftSidebar.jsp"></jsp:include>
        <!-- 右侧边栏       -->
        <div class="aside">
        <!--  用来装作者相关评论关注等动态  -->
            <div class="widgets">
                <h4>相关动态</h4>
                <ul class="body random">
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《满溢的水果挞将于2020年10月播出。</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="../uploads/right1.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《EX-ARM》于2021年1月10日播出</p>
                            <p class="reading">阅读(906)</p>
                            <div class="pic">
                                <img src="../uploads/right2.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">手游《Fate/Grand》配信5周年纪念动画PV公开</p>
                            <p class="reading">阅读(509)</p>
                            <div class="pic">
                                <img src="../uploads/right3.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">芳文社漫画改编动画《满溢的水果塔》追加声优</p>
                            <p class="reading">阅读(679)</p>
                            <div class="pic">
                                <img src="../uploads/right4.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《天使与龙的轮舞》将推出蓝光BOX。</p>
                            <p class="reading">阅读(889)</p>
                            <div class="pic">
                                <img src="../uploads/right5.jpg" alt="">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 中间部分       -->
        <div class="content">
            <%
                Cookie[] cookies = request.getCookies();
                String userId = CookieUtils.getCookie("userId", cookies);
                if (userId.equals("0")){
            %>
            <jsp:include page="./LoginOrRegister.jsp"></jsp:include>
            <%
            }else {

            %>
            <style>
                .workbench:hover{
                    border: 1px solid  #FBAB7E;
                    background-image: -webkit-linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
                    background-image: -moz-linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
                    background-image: -o-linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
                    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
                ;
                }
            </style>
            <!--       工作台     -->
            <div class="panel new" style="height: 175px;padding: 0px">
                <div class="row" style="margin-bottom: 5px;margin-left: 15px;margin-top: 10px">
                    <span style="font-weight: bold;font-size: 30px">工作台</span>
                </div>
                <div class="row">
                    <div class="col-sm-3 workbench" style="border: 1px solid #CDB38B;height: 116px;padding: 20px 20px 20px 35px" >
                        <a  data-toggle="modal" href="#update"  style="color: black; text-decoration : none">
                            <div style="height: 40px">
                            <span class="glyphicon glyphicon-camera" style="font-size: 25px;">
                        </span>
                                <span style="font-size: 16px">update</span>
                            </div>
                            <div style="height: 40px;text-align: center">
                                <span>抖音记录美好生活</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-3 workbench" style="border: 1px solid #CDB38B;height: 116px;padding: 20px">
                        <a href="production.jsp" style="color: black; text-decoration : none">
                            <div style="height: 40px" id="product">
                            <span class="glyphicon glyphicon-fire" style="font-size: 25px;">
                        </span>
                                <span style="font-size: 16px">内容管理</span>
                            </div>
                            <div style="height: 40px;text-align: center ;">
                                <span>抖音记录美好生活</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-3 workbench" style="border: 1px solid #CDB38B;height: 116px;padding: 20px">
                        <div style="height: 40px">
                            <span class="glyphicon glyphicon-sunglasses" style="font-size: 25px;">
                        </span>
                            <span style="font-size: 16px">粉丝管理</span>
                        </div>
                        <div style="height: 40px;text-align: center;">
                            <span>抖音记录美好生活</span>
                        </div>
                    </div>
                    <div class="col-sm-3 workbench" style="border: 1px solid #CDB38B;height: 116px;padding: 20px 35px 20px 20px">
                        <div style="height: 40px">
                            <span class="glyphicon glyphicon-piggy-bank" style="font-size: 25px;">
                        </span>
                            <span style="font-size: 16px">收益管理</span>
                        </div>
                        <div style="height: 40px;text-align: center">
                            <span>抖音记录美好生活</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--      数据展示     -->
            <div class="panel new" style="height: 300px;padding-left: 30px;padding-top: 10px">
                <div class="row" style="margin-bottom: 5px">
                    <span style="font-weight: bold;font-size: 30px">数据展示</span>
                </div>
                <div class="row">
                    <div class="col-sm-4" >
                        <div  style="height: 100px;padding: 0px;background-color: #F6F6F6 ; border-radius: 20px 20px 20px 20px;margin-bottom: 20px">
                            <div class="panel-heading" style="height: 100px;padding: 0px 5px">
                                <h3 class="panel-title" style="font-size: 20px;border: none;padding: 5px;margin: 0px">总播放量</h3>
                                <div style="height: 55px;text-align: center">
                                    <span > 123123</span>
                                </div>
                            </div>
                        </div>
                        <div  style="height: 100px;padding: 0px;background-color: #F6F6F6 ; border-radius: 20px 20px 20px 20px;">
                            <div class="panel-heading" style="height: 100px;padding: 0px 5px">
                                <h3 class="panel-title" style="font-size: 20px;border: none;padding: 5px;margin: 0px">总收藏量</h3>
                                <div style="height: 55px;text-align: center">
                                    <span id="collectionNum"> 123123</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4" >
                        <div  style="height: 100px;padding: 0px;background-color: #F6F6F6 ; border-radius: 20px 20px 20px 20px;margin-bottom: 20px">
                            <div class="panel-heading" style="height: 100px;padding: 0px 5px">
                                <h3 class="panel-title" style="font-size: 20px;border: none;padding: 5px;margin: 0px">总关注量</h3>
                                <div style="height: 55px;text-align: center">
                                    <span > 123123</span>
                                </div>
                            </div>
                        </div>
                        <div  style="height: 100px;padding: 0px;background-color: #F6F6F6 ; border-radius: 20px 20px 20px 20px;">
                            <div class="panel-heading" style="height: 100px;padding: 0px 5px">
                                <h3 class="panel-title" style="font-size: 20px;border: none;padding: 5px;margin: 0px">总收益</h3>
                                <div style="height: 55px;text-align: center">
                                    <span > 123123</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4" >
                        <div  style="height: 100px;padding: 0px;background-color: #F6F6F6 ; border-radius: 20px 20px 20px 20px;margin-bottom: 20px">
                            <div class="panel-heading" style="height: 100px;padding: 0px 5px">
                                <h3 class="panel-title" style="font-size: 20px;border: none;padding: 5px;margin: 0px">视频数量</h3>
                                <div style="height: 55px;text-align: center">
                                    <span id="videoCount"> 123123</span>
                                </div>
                            </div>
                        </div>
                        <div  style="height: 100px;padding: 0px;background-color: #F6F6F6 ; border-radius: 20px 20px 20px 20px;">
                            <div class="panel-heading" style="height: 100px;padding: 0px 5px">
                                <h3 class="panel-title" style="font-size: 20px;border: none;padding: 5px;margin: 0px">总点赞数</h3>
                                <div style="height: 55px;text-align: center">
                                    <span id="starCount"> 123123</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <%
                }
            %>
        </div>
    </div>

    <%--  上传视频模态框   --%>
    <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 500px">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="form-horizontal" action="./user.do">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel0">上传视频</h4>
                    </div>
                    <input type="hidden" name="action" id="action" value="videoUpdate">
                    <input type="hidden" name="id" id="id" value="">
                    <input type="hidden" name="type" id="type" value="玩家自制">
                    <div class="modal-body" style="height: 320px">
                        <div class="row" style="height: 320px">
                            <div class="col-md-1" style="height: 50px"></div>
                            <div class="col-md-10" style="height: 50px">
                                <div class="form-group" style="height: 50px">
                                    <label for="name" class="col-sm-3 control-label" style="height: 50px">视频标题</label>
                                    <div class="col-sm-9"  style="height: 50px">
                                        <input type="text" class="form-control" id="name" name="name" placeholder="视频标题" >
                                    </div>
                                </div>

                                <div class="form-group" style="height: 50px">
                                    <label for="imgUrl" class="col-sm-3 control-label" style="height: 50px">视频</label>
                                    <div class="col-sm-9" style="height: 50px">
                                        <input type="file" class="form-control" id="TVUrl" name="imgUrl">
                                        <input type="hidden" id="tvRealname" name="tvRealname" value="">
                                    </div>
                                </div>
                                <div class="form-group" style="height: 50px">
                                    <label for="imgUrl" class="col-sm-3 control-label" style="height: 50px">视频封面</label>
                                    <div class="col-sm-9" style="height: 50px">
                                        <input type="file" class="form-control" id="imgUrl" name="imgUrl">
                                        <input type="hidden" id="imgRealname" name="imgRealname" value="">
                                    </div>
                                </div>
                                <div class="form-group" style="height: 50px">
                                    <label for="describe" class="col-sm-3 control-label" style="height: 50px">详情介绍</label>
                                    <div class="col-sm-9" style="height: 50px">
                                        <textarea class="form-control" id="describe" name="describe"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1" style="height: 250px"></div>
                        </div>
                    </div>
                    <div class="modal-footer" style="height: 70px">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="../bootstrap/js/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //视频资源上传
        $("#TVUrl").change(function () {
            var file = $("#TVUrl")[0].files[0];
            var myForm = new FormData();
            myForm.append("file", file);
            $.ajax({
                url : "./videoUpdate.do",
                method: "post",
                data: myForm,
                processData: false,//禁止类型转换//必须false才会避开jQuery对 formdata 的默认处理
                contentType: false,//必须false才会自动加上正确的Content-Type
                dataType: "text",
                success : function (data) {
                    $("#tvRealname").prop("value",data)
                }
            })
        })
        //视频封面上传
        $("#imgUrl").change(function () {
            var file = $("#imgUrl")[0].files[0];
            var myForm = new FormData();
            myForm.append("file", file);
            $.ajax({
                url : "./videoUpdate.do",
                method: "post",
                data: myForm,
                processData: false,//禁止类型转换//必须false才会避开jQuery对 formdata 的默认处理
                contentType: false,//必须false才会自动加上正确的Content-Type
                dataType: "text",
                success : function (data) {
                    $("#imgRealname").prop("value",data)
                }
            })
        })
    })
</script>
    <script src="../bootstrap/js/cookie.min.js"></script>
    <script>
        $(function () {
            var userId = $.cookie("userId");
            $.get("user.do",{
                action:"manage"
            },function (data) {
                $("#videoCount").text(data.length)
                var starCount=0;
                var collectionNum=0;
                for (var i = 0; i < data.length; i++) {
                    starCount += parseInt(data[i].starNum);
                    collectionNum += parseInt(data[i].collectionNum);
                }
                $("#starCount").text(starCount)
                $("#collectionNum").text(collectionNum)
        })
        })

    </script>
</body>